<template>
  <div>
    <a-form :model="formState" ref="imForm" v-bind="formItemLayout">
      <a-form-item name="serviceName" label="服务商">
        <a-select v-model:value="formState.serviceName" placeholder="请选择服务商">
          <a-select-option value="IM_RONGCLOUD">融云</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="appKey" label="appKey">
        <a-input v-model:value="formState.appKey"/>
      </a-form-item>
      <a-form-item name="appSecret" label="appSecret">
        <a-input v-model:value="formState.appSecret"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab2" setup>
import {onMounted, ref} from 'vue';
import {getConfig, saveIm} from '../data/config.api';


const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 10},
};
const formState = ref({
  serviceName: '',
  appKey: '',
  appSecret: '',
});

onMounted(() => {
  setData()
});


/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getConfig({
    configType: 'im'
  }).then((data) => {
    formState.value = JSON.parse(data.IM_CONFIG)
  })
}

/**
 * 表单提交
 */
async function handleSubmit() {
  saveIm({
    ...formState.value
  }).then(() => {

  })
}

</script>
